<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/system/'}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>

    <!-- ztree树形结构 -->
    <link rel="stylesheet" href="resources/widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="resources/widget/zTree/jquery.ztree.all.min.js"></script>

    <!-- 表单验证 -->
    <link rel="stylesheet" href="resources/widget/easyform/js/easyform/easyform.css">
    <script src="resources/widget/easyform/js/easyform/easyform.js"></script>

    <!-- TODO 自定义ajax请求 -->
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mydialog.js'}"></script>

    <script th:inline="javascript">
        /**
         * 下一步
         */
        function next() {
            $("#gaoji_id").click();
        }

        //初始化表单验证
        $(function (){
            $("#formid").easyform();
        });


        $(function(){
            //初始化终端分组树
            getClientZtree("ztree_div", {
                check: true
            });

            //初始化
            grouptype_change();
        });

        /**
         * 选择开会的终端
         */
        function selectClient(){
            openDialog("dialog_div", "选择终端设备", 300, 400);
        }

        //终端选择状态
        var flag = false;
        function select(){
            var treeObj = getZtree("ztree_div");
            //获得所有被选择的节点
            var checkedNodes = treeObj.getCheckedNodes(true);

            var showStr = "";
            var hiddenStr = "";
            var cids = new Array();
            A:for(var i = 0; i < checkedNodes.length; i++){
                if(checkedNodes[i].id == null){
                    for(var j = 0; j < cids.length; j++){
                        if(cids[j] == checkedNodes[i].userid){
                            continue A;
                        }
                    }
                    cids.push(checkedNodes[i].userid);
                    //说明当前是终端
                    showStr += "<input name='client_start' type='radio' value='" + checkedNodes[i].userid + "'/> " + checkedNodes[i].gname;
                    hiddenStr += "<input name='client_ids' type='hidden' value='" + checkedNodes[i].userid + "'/>";
                }
            }

            if(showStr != "" && hiddenStr != ""){
                flag = true;
                $("#cspan_show").html(showStr);
                $("#cspan_id").html(hiddenStr);
            } else {
                flag = false;
                $("#cspan_show").html("未选择终端");
                $("#cspan_id").html("");
            }

            //关闭弹窗
            closeDialog("dialog_div");
        }


        //组播方式的改变事件
        function grouptype_change(){
            var select = $("#grouptype_id");

            var groupip = $("#groupip_id");
            var groupport1 = $("#groupport_id1");
            var groupport2 = $("#groupport_id2");
            var groupport3 = $("#groupport_id3");

            if(select.val() == 0){
                //不支持 - 禁用
                groupip.attr("disabled","disabled");
                groupport1.attr("disabled","disabled");
                groupport2.attr("disabled","disabled");
                groupport3.attr("disabled","disabled");
            } else {
                //支持
                groupip.removeAttr("disabled");
                groupport1.removeAttr("disabled");
                groupport2.removeAttr("disabled");
                groupport3.removeAttr("disabled");
            }
        }

        /**
         * 保存会议
         */
        function saveMeeting(){

            //判断
            if(!flag){
                alert("开会终端不能为空！");
                return ;
            }

            //提交表单
            $("#formid").submit();
        }
    </script>

</head>
<body>
<div id="main-content">

    <!-- End .clear -->
    <div class="content-box">
        <!-- Start Content Box -->
        <div class="content-box-header">
            <h3>新建会议</h3>
            <ul class="content-box-tabs">
                <li><a href="#tab1" class="default-tab">基本配置</a></li>
                <!-- href must be unique and match the id of target div -->
                <li><a id="gaoji_id" href="#tab2">高级配置</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <!-- End .content-box-header -->
        <form id="formid" th:action="${#request.getContextPath() + '/meeting/add'}" method="post">
            <div class="content-box-content">
                <div class="tab-content default-tab" id="tab1">
                    <fieldset>
                        <table>
                            <tr style="background-color:#fff;">
                                <td><label>会议名称</label></td>
                                <td><input
                                        class="text-input" type="text"
                                        name="name" value="视频会议" data-easyform="null" data-message="会议名称不能为空！"/></td>
                                <td><label>会议号码</label></td>
                                <td><input
                                        class="text-input" id="number_id" type="text"
                                        name="number" th:value="${number}"/></td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>密码</label></td>
                                <td><input id="password_id"
                                        class="text-input" type="password"
                                        name="password" value="888888" data-easyform="length:6 16;" data-message="请输入6到16位的密码！"/></td>
                                <td><label>确认密码</label></td>
                                <td><input
                                        class="text-input" type="password"
                                        name="againpassword" data-easyform="equal:#password_id;" data-message="两次密码输入不匹配" value="888888"/></td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>会议时长</label></td>
                                <td colspan="3"><select name="time1">
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select> 小时
                                    <select name="time2">
                                        <option value="15">15</option>
                                        <option value="30">30</option>
                                        <option value="45">45</option>
                                    </select> 分钟
                                    <input type="checkbox"
                                           name="isfoerver" value="1" alt="false" checked/> 永久会议
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>码率</label></td>
                                <td><select name="ml">
                                    <option value="1">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                    <option value="4">Option 4</option>
                                </select></td>
                                <td><label>会议类型</label></td>
                                <td><select name="type">
                                    <option value="0">主麦形式</option>
                                    <option value="1">多方讨论形式</option>
                                </select>
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>开会方式</label></td>
                                <td><select name="fs">
                                    <option value="0">中途允许加入</option>
                                    <option value="1" selected>中途不允许加入</option>
                                </select></td>
                                <td><label>三级级联口</label></td>
                                <td><select name="lk">
                                    <option value="0">只能切换</option>
                                </select></td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>开会终端</label></td>
                                <td colspan="3">
                                    <button class="mybutton" type="button" onclick="selectClient();">选择开会终端</button>
                                    <span id="cspan_id"></span>
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>选择发起者</label></td>
                                <td colspan="3">
                                    <span id="cspan_show">未选择终端</span>
                                </td>

                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>备注</label></td>
                                <td colspan="3">
                                    <textarea cols="10" rows="5" name="info" alt="false"></textarea>
                                </td>

                            </tr>
                            <tr style="background-color:#fff;">
                                <td colspan="4">
                                    <input class="mybutton" type="button" onclick="next();" value="下一步"/>
                                    <input class="mybutton" type="button" onclick="saveMeeting();" value="保存"/>
                                </td>

                            </tr>
                        </table>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </div>
                <!-- End #tab1 -->
                <div class="tab-content" id="tab2">
                    <fieldset>
                        <table>
                            <tr style="background-color:#fff;">
                                <td><label>多画面数</label></td>
                                <td>
                                    <select name="mpic">
                                        <option value="0" th:selected="${default.mpic == 0 }">2画面</option>
                                        <option value="1" th:selected="${default.mpic == 1 }">4画面</option>
                                    </select></td>
                                <td><label>主动呼叫终端</label></td>
                                <td><input
                                        class="text-input" type="radio"
                                        name="zdhjzd" value="1"
                                        th:checked="${default.zdhjzd == 1 || default.zdhjzd == null}"/>是
                                    <input
                                            class="text-input" type="radio"
                                            name="zdhjzd" value="0" th:checked="${default.zdhjzd == 0}"/>否
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>WEB 监控画面数</label></td>
                                <td><select name="webpic">
                                    <option value="0" th:selected="${default.webpic == 0 }">不支持</option>
                                    <option value="1" th:selected="${default.webpic == 1 }">支持</option>
                                </select></td>
                                <td><label>终端上端参加混音</label></td>
                                <td><input
                                        class="text-input" type="radio"
                                        name="zdsdcjhy" value="1"
                                        th:checked="${default.zdsdcjhy == 1 || default.zdsdcjhy == null }"/>是
                                    <input
                                            class="text-input" type="radio"
                                            name="zdsdcjhy" value="0" th:checked="${default.zdsdcjhy == 0 }"/>否
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>多画面显示模式</label></td>
                                <td>
                                    <input
                                            class="text-input" type="radio"
                                            name="mpicmode" value="1"
                                            th:checked="${default.mpicmode == 1 || default.mpicmode == null }"/>指定
                                    <input
                                            class="text-input" type="radio"
                                            name="mpicmode" value="0" th:checked="${default.mpicmode == 0 }"/>自动
                                </td>
                                <td><label>辅视频码率</label></td>
                                <td><select name="fspml">
                                    <option value="0" th:selected="${default.fspml == 0 }">自动适应</option>
                                </select>
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>组播方式</label></td>
                                <td><select id="grouptype_id" name="grouptype" onchange="grouptype_change();">
                                    <option value="0" th:selected="${default.grouptype == 0 }">不支持</option>
                                    <option value="1" th:selected="${default.grouptype == 1 }">支持</option>
                                </select></td>
                                <td><label>辅视频类型</label></td>
                                <td><select name="fsplx">
                                    <option value="0" th:selected="${default.fsplx == 0 }">启用私有协议</option>
                                    <option value="1" th:selected="${default.fsplx == 1 }">不启用私有协议</option>
                                </select>
                                </td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>组播IP地址</label></td>
                                <td><input id="groupip_id"
                                        class="text-input" type="text"
                                        name="gourpip" value="226.0.0.2" th:value="${default.gourpip}"/></td>
                                <td><label>辅视频能力</label></td>
                                <td><select name="fspnl">
                                    <option value="0" th:selected="${default.fspnl == 0 }">H264</option>
                                </select></td>
                            </tr>
                            <tr style="background-color:#fff;">
                                <td><label>组播端口</label></td>
                                <td>音频：<input id="groupport_id1"
                                        class="text-input" type="text"
                                        name="groupportyp" style="width: 30px" value="12781"
                                        th:value="${default.groupportyp}"/><br/><br/>
                                    主视频：<input id="groupport_id2"
                                            class="text-input" type="text"
                                            name="groupportzsp" style="width: 30px" value="12782" th:value="${default.groupportzsp}"/><br/><br/>
                                    辅视频：<input id="groupport_id3"
                                            class="text-input" type="text"
                                            name="groupportfsp" style="width: 30px" value="12783" th:value="${default.groupportfsp}"/><br/><br/>
                                </td>
                                <td><label>广播源自看</label></td>
                                <td><input
                                        class="text-input" type="radio"
                                        name="gbyzk" value="1"
                                        th:checked="${default.gbyzk == 1 || default.gbyzk == null }"/>是
                                    <input
                                            class="text-input" type="radio"
                                            name="gbyzk" value="0" th:checked="${default.gbyzk == 0 }"/>否
                                </td>
                            </tr>

                            <tr style="background-color:#fff;">
                                <td><label>视频能力</label></td>
                                <td><select name="spnl">
                                    <option value="0" th:selected="${default.spnl == 0 }">H264</option>
                                </select></td>
                                <td><label>是否启用IP自动降速</label></td>
                                <td><input
                                        class="text-input" type="radio"
                                        name="isopenipzdjs" value="1"
                                        th:checked="${default.isopenipzdjs == 1 || default.isopenipzdjs == null }"/>是
                                    <input
                                            class="text-input" type="radio"
                                            name="isopenipzdjs" value="0" th:checked="${default.isopenipzdjs == 0 }"/>否
                                </td>
                            </tr>

                            <tr style="background-color:#fff;">
                                <td><label>音频能力</label></td>
                                <td><select name="ypnl">
                                    <option value="0" th:selected="${default.ypnl == 0 }">G733</option>
                                </select></td>
                                <td><label>音频加密算法</label></td>
                                <td><select name="ypjmsf">
                                    <option value="0" th:selected="${default.ypjmsf == 0 }">不支持</option>
                                    <option value="1" th:selected="${default.ypjmsf == 1 }">支持</option>
                                </select></td>
                            </tr>

                            <tr style="background-color:#fff;">
                                <td><label>会议存储</label></td>
                                <td><select name="hycc">
                                    <option value="0" th:selected="${default.hycc == 0 }">自动存储</option>
                                    <option value="1" th:selected="${default.hycc == 1 }">不存储</option>
                                </select></td>
                                <td><label>主视频加密算法</label></td>
                                <td><select name="zspjmsf">
                                    <option value="0" th:selected="${default.zspjmsf == 0 }">不支持</option>
                                    <option value="1" th:selected="${default.zspjmsf == 1 }">支持</option>
                                </select></td>
                            </tr>

                            <tr style="background-color:#fff;">
                                <td><label>辅视频加密算法</label></td>
                                <td><select name="fspjmsf">
                                    <option value="0" th:selected="${default.fspjmsf == 0 }">不支持</option>
                                    <option value="1" th:selected="${default.fspjmsf == 1 }">支持</option>
                                </select></td>
                            </tr>

                            <tr style="background-color:#fff;">
                                <td colspan="4">
                                    <input class="mybutton" type="submit" value="保存"/>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                    <div class="clear"></div>
                    <!-- End .clear -->
                </div>
                <!-- End #tab2 -->
            </div>
        </form>
        <!-- End .content-box-content -->
    </div>

    <div id="footer">
        <small> <!-- Remove this notice or replace it with whatever you want -->
            &#169; Copyright 2010 Your Company | Powered by <a href="#">admin
                templates</a> | <a href="#">Top</a>
        </small>
        <a href="http://www.mycodes.net/" target="_blank">www.mycodes.net</a>
    </div>
    <!-- End #footer -->
</div>
<!-- End #main-content -->

<div id="dialog_div" style="display: none;">
    <!-- 树形结构 -->
    <div id="ztree_div" class="ztree"></div>
    <button class="mybutton" type="button" onclick="select();">确定</button>
</div>

</body>
</html>